<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 动态伪类 */

        .dynamic {
            /* background: #000 */
        }

        .dynamic:link {
            /* 有链接 */
            /* background: red */
        }

        .dynamic:visited {
            /* 链接点击后(拜访后) */
            /* background: orange */
        }

        .dynamic:hover {
            /* 滑入 */
            /* background: blue */
        }

        .dynamic:active {
            /* 激活状态，按住不送，(有:focus的时候会被替代) */
            /* background: green */
        }

        .dynamic:focus {
            /* 聚焦后 */
            /* background: pink */
        }

        /* 目标伪类 */

        p:target {
            /* 突出url中某个标识符的目标元素 */
            background: yellow
        }

        /* input的多选被选中时 */

        .element-box[type='checkbox']:checked {
            background: red
        }

        /* 已启用的input */

        .element-input[type='text']:enabled {
            background: green
        }

        /* 已禁用的input */

        .element-input[type='text']:disabled {
            background: yellow
        }

        .construction-box section:nth-child(4) {
            /* 同级元素中所有元素第几个（如果是section的话则起作用） */
            /* color: yellow */
        }

        .construction-box section:nth-last-child(3) {
            /* 同级元素中所有元素倒数第几个 （如果是section的话则起作用）*/
            /* color: red */
        }

        .construction-box section:nth-of-type(4) {
            /* 同级元素中(相同)元素第几个 */
            /* color: red */
        }

        .construction-box section:nth-of-type(1) {
            /* 同级元素中(相同)元素倒数第几个 */
            /* color: red */
        }

        /* .construction-box section:first-child {
            color: red
        }
        
        .construction-box section:last-child {
            color: yellow;
        } */

        .construction-box section:only-child {
            /* 同级只有一个元素且是section */
            /* color: red */
        }

        .construction-box section:only-of-type {
            /* 同级只有一个section元素时 */
            /* color: red */
        }

        :root {
            /* 匹配元素所有在文档的根元素 */
            /* color: yellowgrepen */
        }

        .construction-box p:empty {
            /* 空的 */
            /* height: 20px;
            background: #ff0000; */
        }

        .construction-box section:not(.aaa) {
            /* 排除指定的*/
            color: red
        }

        .icon::before {
            content: url('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=591053194,1384024618&fm=26&gp=0.jpg');
            margin-right: 5px;
            vertical-align: middle
        }

        .welcome::before {
            content: attr(data-username)
        }
    </style>
</head>

<body>
    <h3> 动态伪类 </h3>
    <button class="dynamic">伪类btn</button>
    <a href="https://www.baidu.com" target="_block" class="dynamic">aaaaaa连接</a>
    <hr />
    <h3> 目标伪类 </h3>
    <p><a href="#news1">跳转至内容 1</a></p>
    <p><a href="#news2">跳转至内容 2</a></p>
    <p id="news1"><b>内容 1...</b></p>
    <p id="news2"><b>内容 2...</b></p>
    <hr />
    <h3> 语言伪类（指定某语言） </h3>
    <p lang="fr">Ceci est un paragraphe.</p>
    <!-- :lang(fr) {
        background: red;
    } -->
    <hr />
    <h3> 元素伪类选择器 </h3>
    <input class="element-box" type="checkbox" />
    <input class="element-input" type="text" disabled />
    <hr />
    <h3>结构伪类</h3>
    <div class="construction-box">
        <section class="aaa">11111</section>
        <section>22222</section>
        <p>333</p>
        <section>33333</section>
        <section>44444</section>
        <section>55555</section>
        <section>66666</section>
    </div>
    <hr />
    <h3>用伪类添加小图标</h3>
    <p class="icon">用伪类添加小图标</p>
    <hr />
    <h3>用伪类做网站欢迎页面</h3>
    <p class="welcome" data-username="马少东">，欢迎来得到阿里</p>
</body>

</html>